<template>
	<view class="content">
		<view class="code-bg" :style="{
			  backgroundImage: `url('${backgroundImage}')`,
			  backgroundSize: '100% 100%',
			  height:'100vh'
			}">
			<view class="arr" @click='beforeleave'>
				<up-icon name="arrow-left" color="#fff" size="20"></up-icon>
			</view>
			<view class="width-686 height-112" style="margin: 0 auto;margin-top: 500rpx;">
				<up-input placeholder="请输入兑换码" border="surround" v-model="inputVal"
					placeholderStyle="color: #E9C28D;font-size:40rpx;" inputAlign="center" fontSize='40rpx'
					color="#E9C28D"></up-input>
			</view>
			<view class="text-center fontSize-28 marginTop-30" style="color: #BDA37D;" v-if='errorCode == true'>
				{{msg}}
			</view>
			<view class="btn-section">
				<view class="btn fontSize-32" @click='toExchangeCode'>
					立即兑换
				</view>
				<view class="fontSize-32 marginTop-32 text-center" style="color: #E9C28D;" @click="toPage">
					我的兑换记录
				</view>
			</view>
		</view>
		<up-popup :show="show" mode='center' bgColor='transparent'>
			<view class="popup_bg">
				<view class="color-white fontSize-52 text-center marginTop-25">
					仅差一步
				</view>
				<view class="text-center marginTop-150">
					激活百霸学法会员解锁专属功能
				</view>

				<view class="flex space-between items-center padding-30 marginTop-50">
					<view class="btn" @click="back()">
						稍后再说
					</view>
					<view class="btn" @click="show = false" style="background: #51D580;">
						立即兑换
					</view>
				</view>
			</view>
		</up-popup>
		<up-popup :show="successShow" mode='center' bgColor='transparent'>
			<view class="popup_bg">
				<view class="color-white fontSize-52 text-center marginTop-25">
					兑换成功
				</view>
				<view class="text-center marginTop-100 fontSize-36 color-333">
					<!-- 您的【百霸学法VIP季度会员】<br />兑换成功，快去体验吧！ -->
					{{msg}}
				</view>

				<view class="flex space-between items-center padding-30 marginTop-50">
					<view class="btn" @click="successShow = false">
						取消
					</view>
					<view class="btn" @click="toPage" style="background: #51D580;">
						兑换记录
					</view>
				</view>
			</view>
		</up-popup>

	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onShow
	} from '@dcloudio/uni-app';
	const inputVal = ref('')
	const backgroundImage = ref('')
	const memberCenterApi = inject("memberCenter");
	const addExchangeCodeApi = inject("addExchangeCode");

	const isShowPage = ref(true)
	const successShow = ref(false)
	const errorCode = ref(false)


	const show = ref(false)
	const is_activated = ref(0)
	const msg = ref('')
	const back = () => {
		uni.navigateBack()
	}
	const toPage = () => {
		uni.navigateTo({
			url: '/pagesA/my/codeRecords?is_activated=' + is_activated.value
		})
	}
	onLoad((op) => {
		is_activated.value = op.is_activated
	});
	onShow(() => {
		isShowPage.value = true
		successShow.value=false
		msg.value=''
		memberCenterApi().then((res) => {
			console.log(res);
			backgroundImage.value = res.dhhuiyuan_image

		});
	});
	const backPage = () => {
		uni.navigateBack()
	}
	const toExchangeCode = () => {
		addExchangeCodeApi({
			code_value: inputVal.value
		}).then(res => {
			console.log(res, '22222222222222222')
			msg.value = res.msg
			if (res.status == 200) {
				setTimeout(() => {
					successShow.value = true
				}, 1000);
			} else {
				errorCode.value = true
			}
		})
	}
	const beforeleave = (e) => {
		if (is_activated.value == 0) {
			show.value = true
		} else {
			uni.navigateBack()
		}
	}
	const toIndex = () => {
		uni.redirectTo({
			url: '/pages/index/index'
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		overflow: hidden;
	}

	::v-deep .u-border {
		border: 2rpx solid #E9C28D !important;
	}

	::v-deep .u-input {
		width: 686rpx;
		height: 112rpx !important;
		padding: 0 !important;
	}

	::v-deep .u-input__content {
		height: 112rpx !important;
	}

	::v-deep .u-input__content__field-wrapper {
		height: 112rpx !important;
	}

	::v-deep .u-input__content__field-wrapper__field {
		height: 112rpx !important;
	}

	::v-deep .u-radius {
		border-radius: 20rpx !important;
	}

	::v-deep .input-placeholder {
		color: #E2B372;
		font-size: 40rpx;
		text-align: center;
	}


	.btn-section {
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);

		.btn {
			width: 702rpx;
			height: 104rpx;
			background: linear-gradient(97deg, #FFEFD9 0%, #E2B372 100%);
			border-radius: 92rpx 92rpx 92rpx 92rpx;
			text-align: center;
			line-height: 104rpx;
			color: #985900;
		}
	}

	.popup_bg {
		width: 610rpx;
		height: 500rpx;
		background: url('https://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/remind.png') no-repeat;
		background-size: 100% 100%;
		overflow: hidden;

		.btn {
			width: 252rpx;
			height: 92rpx;
			background: #CCCCCC;
			border-radius: 74rpx;
			text-align: center;
			line-height: 93rpx;
			color: #fff;
		}

	}

	.code-bg {
		width: 100%;
		height: 100vh;
		overflow: hidden;

	}

	.arr {
		position: absolute;
		left: 22rpx;
		top: 120rpx;
	}

	@media (max-height: 800px) {
		.arr {
			top: 80rpx;
		}
	}
</style>
<script>
	export default {
		options: {
			styleIsolation: 'shared',
		},
	}
</script>